<script setup lang="ts">
import { EnvironmentOutlined, FileTextOutlined, GlobalOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  data: {
    type: String,
    default: '', // 设置默认值为空字符串
  },
  position: {
    type: String,
    default: '',
  },
});

// 使用计算属性动态处理 props.data 的换行符
const dataWithLineBreaks = computed(() => {
  if (typeof props.data === 'string') {
    return props.data.replace(/\n/g, '<br>');
  }
  return ''; // 如果不是字符串，返回空字符串
});
</script>

<template>
  <div>
    <!-- 分布描述 -->
    <div class="">
      <!-- 标题 -->
      <h3 class="flex items-center border-b border-gray-200 pb-4 text-xl font-semibold">
        <EnvironmentOutlined class="mr-2 text-blue-500" />
        分布描述
      </h3>
      <!-- 内容 -->
      <div class="mt-4">
        <div v-if="dataWithLineBreaks" class="rounded-lg bg-gray-50 p-4">
          <div class="leading-relaxed text-gray-700" v-html="dataWithLineBreaks"></div>
        </div>
        <div v-else class="py-8 text-center">
          <FileTextOutlined class="mb-2 text-2xl text-gray-400" />
          <p class="text-gray-500">暂无数据</p>
        </div>
      </div>
    </div>

    <!-- 入侵分布图 -->
    <div class="mt-8">
      <!-- 标题 -->
      <h3 class="flex items-center border-b border-gray-200 pb-4 text-xl font-semibold">
        <GlobalOutlined class="mr-2 text-red-500" />
        入侵分布图
      </h3>
      <!-- 地图组件 -->
      <div class="mt-4">
        <div class="rounded-lg bg-gray-50 p-4">
          <MapComponent :position="position" />
        </div>
      </div>
    </div>
  </div>
</template>
